<template>
    <div>
        <div class="bg"></div>
            <div class="topList">
                <router-link to="/courseinteract" class="topBtn">
                    <i class="iconfont arrow-left">&#xe641;</i>
                    <span class="topTime">  <i class="iconfont">&#xe637;</i>  
                     <!-- 这里传的是时间戳 &nbsp;&nbsp;03:41:59-->
               <downTime :endTime="endTime" :startTime="new Date().getTime()" :endMsg="endMsg" @func="getMsg"></downTime>                        
                    </span>
                </router-link>
          
            </div>
            <div class="contentList">
                <!-- 考题类型 -->
                <div class="examType">
                    <p class="examTypeList"> 
                      <span class="examItem" v-if="qsType==1">单选题</span>
                      <span class="examItem" v-else-if="qsType==2">多选题</span>
                      <span class="examItem" v-else-if="qsType==3">判断题</span>                     
                    </p>
                    <!-- 题目量 2/10-->
                    <p class="examNum">{{qsbeforeone}}/{{qscount}}</p>
                </div>
                <!-- 考试标题 -->
                <div class="examTitle">
                    {{qsname}}
                </div>
                <!-- 考试选项 -->
                <div class="examOptions">
                        <el-checkbox-group v-model="checkList" v-show="multflag" @change="handleCheckedCitiesChange">
                        <el-checkbox style="display:block;padding: 5px;"  v-for="city in cityOptions" :label="city" :key="city">{{city}}</el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            
            <div class="bottombar">
                <p class="lastQuestion" @click="upward">上一题</p>
                <p class="nextQuestion" @click="down">{{downup}}</p>
            </div>

    </div>
</template>

<script>
import Time from "@/components/app/downTime";
import { MessageBox, Toast } from "mint-ui";
export default {
  data() {
    return {
      dt_id: "", //获取课堂编码
      studentinfo: "", //学员信息
      Cos_id: this.$route.params.id, //课程编码
      Cos_Name: this.$route.params.cosname, //课程名称
      dtime: this.$route.params.dt, //考试时间限制   
      isTrue: false,
      checkList: [], //选项结果
      radio: "",
      selflag: false,
      multflag: true,
      endTime: "",
      endMsg: "考试结束",
      downup: "下一题",

      pt_id: "", //题目编码
      questionlist: [], //试题
      //试题切换
      qscount: 0, //总题量
      qsbeforeone: 1, //当前题
      qsname: "", //题目
      qsType: "", //题目类型
      qsAnswer: "", //正确答案
      cityOptions: [], //选项
      detaillist: [], //答题记录数组。
      stuAnswer: "", //学生选项。
      IsRight: "" //评定对错。
    };
  },
  //组件挂载
  components: {
    downTime: Time
  },
  created() {
    this.endTime = new Date().getTime() + this.dtime * 60; //结束时间戳
    // this.goutotiem();//开启计时
  },
  //初始化
  mounted() {
    this.getlode();   
  },
  //事件
  methods: {
     getMsg(data) {
       if(data=="结束"){
          this.listinfo();//时间到了强制交卷。
       }        
      },    
    //初始化
    getlode() {
      this.dt_id = localStorage.getItem("dt_id"); //获取课堂编码
      this.studentinfo = JSON.parse(localStorage.getItem("studentinfo")); //学员信息
      this.$axios
        .get("/AppInteract/" + this.Cos_id)
        .then(Json => {
          if(Json.data==""){
            this.$message({
              message: "没有获取到互动信息！！",
              center: "true",
              offset: 300
            });
            return false;
          }else{
            this.questionlist = Json.data;          
            this.qscount = this.questionlist.length;
            this.changeinfo(0);
          }         
        })
        .catch(err => {
          this.$message.error({
            message: "获取信息失败！请重新登录。。",
            type: "success",
            center: "true",
            offset: 300
          });
        });
    },
    //题目选择计算
    Answerinfo(){
          //选择了选项
          if (this.qsType == 2) {
            //多选题
            let checklength = this.checkList.length; //选择了几个
            for (let i = 0; i < checklength; i++) {
              this.stuAnswer += this.checkList[i].split("：")[0];
            }           
          } else {
            //单选题和判断只会有一个
            this.stuAnswer += this.checkList[0].split("：")[0];
            if (this.qsType == 3) {
              //若是判断题
              if (this.stuAnswer == "A") {
                this.stuAnswer = "正确";
              }
              if (this.stuAnswer == "B") {
                this.stuAnswer = "错误";
              }
            }
          }
          //判断是否对
          if (this.qsAnswer == this.stuAnswer) {
            this.IsRight = 1; //对
          } else {
            this.IsRight = 0; //错
          }
    },
    //本地暂存区集合
    localStorage(){
          //不为空就赋值
          var detailtolist = {
            "Dt_ID": this.dt_id,//课堂编码
            "Cos_ID": this.Cos_id,//课程编码
            "Question_ID": this.pt_id, //题目编码
            "St_Card": this.studentinfo.St_Card, //身份证号
            "Answer_Type": this.qsType, //题目类型
            "Answer_correct": this.qsAnswer, //正确答案
            "Stu_Answer": this.stuAnswer, //学生作答
            "Is_Right": this.IsRight //作答结果
          };
          if (this.detaillist.length ==0) {
            //如果集合为空
            this.detaillist.push(detailtolist); //直接加进来
            this.stuAnswer = ""; //清除作答记录
          } else {           
            //有选项
            var flag = false;
            this.detaillist.forEach(item => {       
              if (
                item.Question_ID == this.pt_id &&
                item.Answer_Type == this.qsType
              ) {
                //判断是否对
                if (item.Answer_correct == this.stuAnswer) {
                  item.Is_Right = 1; //对
                } else {
                  item.Is_Right = 0; //错
                }
                item.Stu_Answer = this.stuAnswer;//修改
                flag = true;
              }
            });
            //如果最终，循环完毕，得到的 flag 还是 false，
            if (!flag) {
              this.detaillist.push(detailtolist);
              this.stuAnswer = ""; //清除选项
            }
          }
    },
    //验证是否选了又删除
    DelStorage(){     
      var leng=this.detaillist.length;
      if(leng>0){
       this.detaillist.some((item, i)=>{
　　　　　if(item.Question_ID == this.pt_id &&
            item.Answer_Type == this.qsType){
           this.detaillist.splice(i, 1)
            return true;
         }         　　　　　　　
　　　　})
      }           
    },
    //上一题
    upward() {
      this.downup = "下一题";
      if (this.qsbeforeone <= 1) {
        this.qsbeforeone = 1;
        return false;
      } else {
        this.qsbeforeone = this.qsbeforeone - 1;
        var ex = this.qsbeforeone - 1;
        this.changeinfo(ex);//渲染当前题目
        //选项加载
        this.Checkedinfo();//验证是否选择过
      }
    },
    //下一题
    down() {
      if (this.downup == "下一题") {           
        this.stuAnswer = "";//把选项清空
        //选择项结果存入集合
        if (this.checkList != "") {
          this.Answerinfo();//存选择的选项         
          this.localStorage(); //开始本地暂存         
        } else {
          //校验是否清除选项了
          this.DelStorage();
        }     
        this.checkList = [];//先清理
        //----------------------下一题数据加载----------------------------------
        if (this.qsbeforeone + 1 >= this.qscount) {
          this.qsbeforeone = this.qscount;
          this.changeinfo(this.qsbeforeone-1);//渲染当前题
          this.Checkedinfo();//验证是否选择过
          this.downup = "交卷";
          return false;
        } else {
          this.qsbeforeone = this.qsbeforeone + 1;
          var ex = this.qsbeforeone - 1;
          this.changeinfo(ex);//渲染当前题
          this.Checkedinfo();//验证是否选择过
          // this.checkList = [];
        }
      } else {
        //交卷最后一题加进来
        this.stuAnswer = "";//把选项清空
        //选择项结果存入集合
        if (this.checkList != "") {
          this.Answerinfo();//存选择的选项         
          this.localStorage(); //开始本地暂存         
        } else {
          //校验是否清除选项了
          this.DelStorage();
        }
        //开始交卷
        MessageBox.confirm("提交后将无法再修改，是否继续?").then(action => {
            this.listinfo();//交卷
        });               
      }
    },
    //交卷
    listinfo(){    
      if(this.detaillist.length>0){
        var list= this.detaillist
      }else{   
        this.$message({
              message: "试题没有选择不能提交",
              center: "true",
              offset: 300
            });
        return false;
      }         
      this.$axios
      .post("/AppInteract",{list:list,"dt_id":this.dt_id})
        .then(Json=>{
          if(Json.data.flag=="ok"){           
            this.$router.push({ name: "interactend", params: { name: this.Cos_Name,tempStd:Json.data.temp,tempEnd:this.qscount } }); 
          }else{
            this.$message({
              message: "互动提交失败请重新提交！！",
              center: "true",
              offset: 300
            });
            return false;
          }       
        })
        .catch(err=>{
          this.$message.error({
            message: "互动提交失败！请重新尝试。。",
            type: "success",
            center: "true",
            offset: 300
          });
      });           
    },
    //切换数据重置
    changeinfo(ex) {
      this.cityOptions = [];//选项清空
      this.checkList = [];//先清理
      this.pt_id="";
      this.qsname="";
      this.qsType="";
      this.qsAnswer="";   
      this.pt_id = this.questionlist[ex].pt_id; //题目编码
      this.qsname = this.questionlist[ex].name; //题目
      this.qsType = this.questionlist[ex].Type; //类型
      this.qsAnswer = this.questionlist[ex].Answer; //正确答案
      if (this.qsType == 3) {
        this.cityOptions[0] = "A：正确";
        this.cityOptions[1] = "B：错误";
      } else {
        this.cityOptions[0] = "A：" + this.questionlist[ex].option1;
        this.cityOptions[1] = "B：" + this.questionlist[ex].option2;
        if(this.questionlist[ex].option3 != null &&this.questionlist[ex].option3 != ""){
           this.cityOptions[2] = "C：" + this.questionlist[ex].option3; //选项3
        }      
        if(this.questionlist[ex].option4 != null &&this.questionlist[ex].option4 != ""){
           this.cityOptions[3] = "D：" + this.questionlist[ex].option4; //选项4
        }       
        if (this.questionlist[ex].option5 != null &&this.questionlist[ex].option5 != "") {
          this.cityOptions[4] = "E：" + this.questionlist[ex].option5; //选项5
        }
        if (this.questionlist[ex].option6 != null &&this.questionlist[ex].option6 != "") {
          this.cityOptions[5] = "F：" + this.questionlist[ex].option6; //选项6
        }
      }
    },
    //如果已经选过就加载
    Checkedinfo(){
      //试题作答后从新加载--------------------------------------------------
      //校验该题是否已经选择过
      this.checkList = [];//先清理
      if (this.detaillist.length>0 ) {
          this.detaillist.forEach(item=>{
            if(item.Question_ID==this.pt_id&&item.Answer_Type==this.qsType){
              //多选题            
              if (this.qsType == 2) {
                var str=item.Stu_Answer.length;
                  for (let i = 0; i < str; i++) {                  
                    switch(item.Stu_Answer.substr(i,1)){
                      case "A":
                        this.checkList[i] = this.cityOptions[0];
                        break;
                      case "B":                     
                        this.checkList[i] = this.cityOptions[1];
                        break;
                      case "C":
                        this.checkList[i] = this.cityOptions[2];
                        break;
                      case "D":
                        this.checkList[i] = this.cityOptions[3];
                        break;
                      case "E":
                        this.checkList[i] = this.cityOptions[4];
                        break;
                      case "F":
                        this.checkList[i] = this.cityOptions[5];
                        break;
                    }                   
                  }
                } else {                 
                //单选和判断          
                  switch (item.Stu_Answer) {
                    case "正确":
                      this.checkList[0] = this.cityOptions[0];
                      break;
                    case "错误":
                      this.checkList[0] = this.cityOptions[1];
                      break;
                    case "A":
                      this.checkList[0] = this.cityOptions[0];
                      break;
                    case "B":                     
                      this.checkList[0] = this.cityOptions[1];
                      break;
                    case "C":
                      this.checkList[0] = this.cityOptions[2];
                      break;
                    case "D":
                      this.checkList[0] = this.cityOptions[3];
                      break;
                  }
              }
           }                       
          })      
      } else {
        //为空
        this.detaillist = [];
      }
    },
    //选项互斥事件。
    handleCheckedCitiesChange(types) {
      if (this.qsType == 2) {
      } else {
        var str = this.checkList.length;
        var name = this.checkList[str - 1];       
        this.checkList = [];
        this.checkList[0] = name;
      }
    }
  }
};
</script>

<style scoped>
.bg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-image: linear-gradient( 135deg, #0396FF 10%, #ABDCFF 100%); */
  z-index: -1;
  width: 100%;
  /* height: 10rem; */
  background: #ececec;
}

@font-face {
  font-family: "iconfont"; /* project id 1514769 */
  src: url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.eot");
  src: url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.eot?#iefix")
      format("embedded-opentype"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.woff2") format("woff2"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.woff") format("woff"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.ttf") format("truetype"),
    url("//at.alicdn.com/t/font_1514769_ds5xgd8k44.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 25px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: bottom;
}
.viewAll {
  font-size: 18px;
}
.testView {
  float: right;
  margin-right: 10px;
  font-size: 16px;
  color: white;
}

.topTime {
  margin-right: 2rem;
}

.topList {
  height: 11rem;
  width: 100%;
  line-height: 2.5rem;
  /* border:1px solid red; */
  text-align: center;
  font-size: 18px;
  background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%);
}
.topBtn {
  text-decoration: none;
  color: white;
  /* display: inline-block; */
  width: 100%;
  float: left;
}

.arrow-left {
  float: left;
}
.contentList {
  width: 90%;
  margin: -7rem auto;
  /* height: 25rem; */
  /* border:1px solid red; */
  border-radius: 10px;
  background: white;
  padding-bottom: 2rem;
  margin-bottom: 80px;
}
p {
  margin: 0;
  padding: 0;
}
.examType {
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  padding: 15px 10px;
}
.examTypeList {
  flex: 1;
}
.examNum {
  flex: 1;
  text-align: right;
  color: #1a9fff;
  font-size: 19px;
}
.examItem {
  color: #1a9fff;
  font-size: 17px;
  font-weight: 600;
}
.examTitle {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 15px;
  /* border:1px solid red; */
}
.examOptions {
  font-size: 17px;
  color: #a0a0a0;
}
.examOptions /deep/ .el-checkbox__label{
  width: 100% !important;
    display: inline-block !important;
    white-space: normal !important;
    vertical-align: top !important;
}
.fn {
  font-size: 22px;
}
.optionInfo {
  width: 80%;
  /* border:1px solid green; */
  display: inline-block;
  vertical-align: text-top;
}
.optionList {
  padding: 3px 10px;
}
.selectColor {
  color: dodgerblue;
}
.bottombar {
  position: fixed;
  z-index: 900;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid white;
  height: 50px;
  text-align: center;
  background: #0396ff;
  /* background-image: linear-gradient(135deg, #0396ff 10%, #abdcff 100%); */
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1) inset;
  display: flex;
  line-height: 50px;
  color: white;
}
.lastQuestion,
.nextQuestion {
  flex: 1;
}

/* 试题总览 */
.testAllStatus {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 10000;
}
.testBg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  /* background-color: #d9d9d9; */
  background-color: darkgray;
  z-index: -10;
  opacity: 0.5;
}
.testOptionList {
  width: 80%;
  margin: 4rem auto;
  border-radius: 10px;
  background: white;
  padding: 10px 20px;
  font-size: 16px;
}
.options {
  display: inline-block;
  width: 30px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid;
  margin-bottom: 5px;
  color: #a0a0a0;
}
.optionMask {
  margin-bottom: 10px;
}
.optionType {
  margin-bottom: 5px;
}
.selectOptions {
  color: blue;
  border: 1px solid blue;
}
.downTime-wrapper {
  display: inline-block;
}
.el-checkbox {
  display: block;
  padding: 5px;
}
</style>
